@mixin dos-margin-only( $extra: 0, $character-space: 0) {
  margin-top:   8/$sz * $line-height;
  margin-bottom:   7/$sz * $line-height;
  margin-left:   7/$sz * $space-width;
  margin-right:   5/$sz * $space-width;
}

@mixin dos-padding-only( $extra: 0, $character-space: 0) {
  padding-top: (7/$sz + $extra) * $line-height;
  padding-bottom: (8/$sz + $extra) * $line-height;
  padding-left: (5/$sz + $character-space) * $space-width;
  padding-right: (7/$sz + $character-space) * $space-width;
}
@mixin dos-border-single($color: $black, $extra: 0, $character-space: 0) {
  // In dos world, the left and right are actually a bit thicker.

  border: (1/$sz * $line-height) solid $color;

  border-left-width: (4/$sz * $space-width);
  border-right-width: (4/$sz * $space-width);

  @include dos-margin-only($extra, $character-space);
  @include dos-padding-only($extra, $character-space);
}

@mixin dos-uncollapse-margin($width: $space-width - 2) {
  display: inline-block;
  width: calc(100% - #{$width} );
}

@mixin dos-shadow($color: black) {
  filter: drop-shadow($line-height / 2 $space-width 0 $color);
  margin-right: (1 + 5/$sz) * $space-width;
  // margin bottom you're on your own
}
@mixin dos-border-active() {
  filter: none;
  // this little position: relative trick keeps shit on the
  // page from moving around.
  position: relative;
  top: $line-height-base;
  left: $space-width;
}

@mixin dos-border-solid($color: $white) {
  border: $line-height solid $color;
  border-left-width: $space-width;
  border-right-width: $space-width;
}

@mixin dos-border-background($color: $grayLight) {
  // Here's essentially the problem. Given the above calculations we want
  // the margin to be the border.
  // That means we really want this:
  //
  //      8/$sz
  //  7/$sz    5/$sz
  //      7/$sz
  //
  // This isn't really how box-shadow works ... there's two ways to do it.
  // We'll start out with the easy one, which is to make the size 0.
  // in this model we just hit the 4 corners and wish for the best.
  // 
  // To see this in action, replace the "color" with 4 different colors 
  //
  // There's another crazier way to do this where all you need are 2
  // but I don't feel like doing that math right now.
  box-shadow: 
    (-7/$sz * $space-width) (-8/$sz * $line-height) 0 0 $color,
    ( 5/$sz * $space-width) ( 7/$sz * $line-height) 0 0 $color,
    (-7/$sz * $space-width) ( 7/$sz * $line-height) 0 0 $color,
    ( 5/$sz * $space-width) (-8/$sz * $line-height) 0 0 $color;
}
@mixin dos-border-background-inset($color: $grayLight, $borderSize: 1) {
  $spacer: (($space-width - $borderSize) / 2);
  box-shadow: 
    inset 0 (-$line-height / 2 + $spacer) 0 $spacer - .5 $color,
    inset 0 ($line-height / 2 - $spacer) 0 $spacer - .5 $color,
    (-7/$sz * $space-width) (-8/$sz * $line-height) 0 0 $color,
    ( 5/$sz * $space-width) ( 7/$sz * $line-height) 0 0 $color,
    (-7/$sz * $space-width) ( 7/$sz * $line-height) 0 0 $color,
    ( 5/$sz * $space-width) (-8/$sz * $line-height) 0 0 $color;
}

@mixin dos-solid-border($color, $character-space:0) {
  @include dos-border-single($character-space: $character-space);
  @include dos-border-background($color: $color);
}
@mixin dos-border-off($direction: 'all') {
  @if $direction == 'bottom' {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
  } 
  @else { 
    border: 0;
    padding: 0;
    margin: 0 0 0 0;
  }
  box-shadow: 0;
}

@mixin plain-headers() {
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    border: 0;
    padding: 0;
    margin: 0;
    &::after, &::before {
      content: '';
    }
    animation: none;
  }
}
